<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Demo</title>

  <link rel="stylesheet" href="/css/reset.css">
  <link rel="stylesheet" href="/css/index.css">
  <link rel="stylesheet" href="/font/iconfont.css">

  <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
  <script src="https://unpkg.com/axios/dist/axios.min.js"></script>

</head>
<body style=" height: 2000px; " id="app">

  <!---------- 顶部页面 ---------->
  <div id="header">
    <!-- 最顶部 -->
    <div class="header-top" id="loginDiv">
      <div class="auto-width">
        <ul class="header-guide fl" style="width: 300px">
          <li class="guide-item">
            <a href="/">首页</a>
          </li>
          <li class="guide-item">
            <a href="http://localhost:9999/search?tagId=0">分类</a>
          </li>
          <li class="guide-item">
            <a href="http://localhost:9999/rankList">排行榜</a>
          </li>
        </ul>
        <div class="search-box fl">
          <form action="http://localhost:9999/search?" method="get">
            <input type="text" class="fl search-text" placeholder="请输入漫画名" name="name" >
            <button class="fl search-btn">
              <i class="iconfont icon-search"></i>
            </button>
          </form>
        </div>
        <ul class="header-guide fr" style="width: 300px">
          <!--登录注册-->
          <li v-if="!loginUser.username" class="guide-item">
            <a href="http://localhost:9999/login">登录/注册</a>
          </li>
          <li class="guide-item login"  v-if="loginUser.username">
            <a  :href="'http://localhost:9999/person?loginUser.id'" >
              <img :src="'http://localhost:8081/Imgs/headImg/'+loginUser.avatar" style="width: 40px;height: 40px;position:relative; top:5px" >&nbsp;&nbsp;
              {{loginUser.username}}
            </a>
          </li>
          <li class="guide-item history" v-if="loginUser.username">
            <a href="" @click="userExit()">退出</a>
          </li>
        </ul>
      </div>
    </div>

    <!-- 焦点图 -->
    <div class="header-banner">
      <a href="#" class="bg"></a>
      <span class="text">这辆车……到底能不能上啊！！！</span>
      <a href="#" class="link"></a>
    </div>
    <!-- 导航 -->
    <div id="taglist" class="header-nav">
      <div class="nav-wrap auto-width clearfix">
        <a href="http://localhost:9999/search?tagId=0" class="nav-item nav-cur">全部</a>
        <a :href="'http://localhost:9999/search?tagId='+item.id" class="nav-item" v-for="item in taglist">{{item.name}}</a>
      </div>

    </div>

  </div>

  <!---------- 主体内容 ---------->
  <div id="main">
    <div class="auto-width clearfix">
      
      <!-- 幻灯片部分 -->
      <section class="area clearfix">
        <header class="area-header clearfix">
          <h2 class="title">
            <img src="/images/area-title__4.gif" alt="#">
            <b>猜你喜欢</b>
          </h2>
          <span class="c1 fr" @click="getrandomList ">换一批</span>
        </header>


        <ul class="slider-menu fl">

          <li class="slider-menu__item" v-for="item in randomList">
            <a :href="'http://localhost:9999/comicDetail?id='+item.id" class="item">
              <img :src="'http://localhost:8081/imgs/resource/'+item.id+'/'+item.cover" alt="#">
              <div class="mask-gradient">
                <!--名称-->
                <p>{{item.name}}</p>
                <p>{{item.introduceText}}</p>
                <div class="text-box">
                  <em>作者: {{item.writer}}</em>
                  <span class="info">
                    <!--购买数量-->
                    <i class="iconfont icon-collect">{{item.buyCount}}</i>
                  </span>
                </div>
              </div>
            </a>
          </li>


        </ul>
      </section>

      <!-- 强档推荐 -->
      <section class="area clearfix area-recommend">
        <header class="area-header">
          <h2 class="title">
            <img src="/images/area-title__1.gif" alt="#">
            <b>强档推荐</b>
          </h2>
        </header>
        <div class="area-cont">
          <div class="area-main fl">
            <ul class="area-menu fl clearfix">
              <li class="area-menu__item" v-for="item in fineList">
                <a :href="'http://localhost:9999/comicDetail?id='+item.id" class="img">
                  <img :src="'http://localhost:8081/imgs/resource/'+item.id+'/'+item.cover" alt="#">
                  <span class="mask">
                    <em class="time">
                      跟新至:
                      <span v-if="item.sectionList">{{item.sectionList.name}}</span>
                    </em>
                  </span>
                </a>
                <div class="info">
                  <a href="#" class="title">{{item.name}}</a>
                  <a href="#" class="userName"><span>作者: {{item.writer}}</span></a>
                </div>
              </li>
            </ul>
          </div>
          <!--活动-->
          <div class="area-side fr">
            <a href="#">
              <img src="/images/cont/slider-menu__6.jpg" alt="#"></a>
            <div class="article-wrap">
              <ul class="tab-cont tab-cont__active">
                <li class="item">
                  <a href="#" class="img"><img src="/images/cont/side-img1.jpg" alt="#"></a>
                  <div class="info">
                    <a href="#">VIP限时领取</a>
                  </div>
                </li>
                <li class="item">
                  <a href="#">抢来的感情究竟能不能感到幸福？</a>
                </li>
                <li class="item">
                  <a href="#">过来看看吧。。</a>
                </li>
              </ul>
            </div>
          </div>
        </div>
      </section>

      <!-- 畅销漫画 -->
      <section class="area clearfix area-banana">
        <div class="area-cont">
          <div class="area-main fl" JS-tab="true">
            <header class="area-header">
              <h2 class="title">
                <img src="/images/area-title__6.gif" alt="#">
                <b>畅销漫画</b>
              </h2>
            </header>

            <!--畅销漫画列表-->
            <ul class="area-menu fl clearfix tab-cont tab-cont__active">
              <li class="area-menu__item" v-for="(item,index) in buyList" v-if="index<5" :key="index">
                <a :href="'http://localhost:9999/comicDetail?id='+item.id" class="img">
                  <img :src="'http://localhost:8081/imgs/resource/'+item.id+'/'+item.cover" alt="#">
                  <span class="mask">
                    <em class="time">
                      跟新至:
                      <span v-if="item.sectionList">{{item.sectionList.name}}</span>
                    </em>
                  </span>
                </a>
                <div class="info">
                  <a href="#" class="title">{{item.name}}</a>
                  <a href="#" class="userName"><span>作者: {{item.writer}}</span></a>
                </div>
              </li>
            </ul>

            <a href="#" class="ad"><img src="/images/cont/ad1.jpg" alt="#"></a>
          </div>
          <div class="area-side fr" JS-tab="true">

            <header class="area-header">
              <h2 class="title">
                <img src="/images/area-title__3.gif" alt="#">
                <b>畅销榜</b>
              </h2>
            </header>

            <!--畅销榜单-->
            <div class="article-wrap">
              <!--畅销榜单-->
              <ul class="tab-cont tab-cont__active">
                <!--榜一-->
                <li class="item" style="height: 120px" v-for="(item,index) in buyList" v-if="index==0">
                  <a :href="'http://localhost:9999/comicDetail?id='+item.id" class="img">
                    <img :src="'http://localhost:8081/imgs/resource/'+item.id+'/'+item.cover" alt="#" style="height: 120px">
                  </a>
                  <div class="info">
                    <a href="#">{{item.name}}</a>
                    <p>{{item.introduceText}}</p>
                    <p>
                      <a href="#" class="user fl">作者: {{item.writer}}</a>
                    </p>
                  </div>
                </li>
                <li class="item" v-for="(item,index) in buyList" v-if="index!=0">
                  <a :href="'http://localhost:9999/comicDetail?id='+item.id">{{index}}.{{item.name}}</a>
                </li>
              </ul>
            </div>
            <a href="http://localhost:9999/rankList" class="more">查看更多 ></a>
          </div>
        </div>
      </section>

      <!-- 更新 -->
      <section class="area clearfix area-drama">
        <div class="area-cont">
          <div class="area-main fl" JS-tab="true">
            <header class="area-header">
              <h2 class="title">
                <img src="/images/area-title__5.gif" alt="#">
                <b>本周更新</b>
              </h2>
            </header>

            <ul class="drama-menu clearfix tab-cont tab-cont__active">
              <!--周一-->
              <li class="item"
                  v-bind:class="{ 'active': this.weekday==1 }">
                <div class="title">
                  <h3>周一</h3>
                  <span class="icon icon-monday"></span>
                </div>
                <a href="#" class="img" style="height: auto">
                  <img v-if="d1[0]" :src="'http://localhost:8081/imgs/resource/'+d1[0].resourceId+'/'+d1[0].resourceCover" alt="#" style="height: auto">
                </a>
                <p class="link" v-for="(item,index) in d1" :key="index">
                  <a :href="'http://localhost:9999/comicDetail?id='+item.resourceId">{{item.resourceName}}</a>
                  <span>{{item.name}}</span>
                </p>
              </li>
              <!--周二-->
              <li class="item"
                  v-bind:class="{ 'active': this.weekday==2 }">
                <div class="title">
                  <h3>周二</h3>
                  <span class="icon icon-tuesday"></span>
                </div>
                <a href="#" class="img" style="height: auto">
                  <img v-if="d2[0]" :src="'http://localhost:8081/imgs/resource/'+d2[0].resourceId+'/'+d2[0].resourceCover" alt="#" style="height: auto">
                </a>
                <p class="link" v-for="(item,index) in d2" :key="index">
                  <a :href="'http://localhost:9999/comicDetail?id='+item.resourceId">{{item.resourceName}}</a>
                  <span>{{item.name}}</span>
                </p>
              </li>
              <!--周三-->
              <li class="item"
                  v-bind:class="{ 'active': this.weekday==3 }">
                <div class="title">
                  <h3>周三</h3>
                  <span class="icon icon-wednesday"></span>
                </div>
                <a href="#" class="img" style="height: auto">
                  <img v-if="d3[0]" :src="'http://localhost:8081/imgs/resource/'+d3[0].resourceId+'/'+d3[0].resourceCover" alt="#" style="height: auto">
                </a>
                <p class="link" v-for="(item,index) in d3" :key="index">
                  <a :href="'http://localhost:9999/comicDetail?id='+item.resourceId">{{item.resourceName}}</a>
                  <span>{{item.name}}</span>
                </p>
              </li>
              <!--周四-->
              <li class="item"
                  v-bind:class="{ 'active': this.weekday==4 }">
                <div class="title">
                  <h3>周四</h3>
                  <span class="icon icon-thursday"></span>
                </div>
                <a href="#" class="img" style="height: auto">
                  <img v-if="d4[0]" :src="'http://localhost:8081/imgs/resource/'+d4[0].resourceId+'/'+d4[0].resourceCover" alt="#" style="height: auto">
                </a>
                <p class="link" v-for="(item,index) in d4" :key="index">
                  <a :href="'http://localhost:9999/comicDetail?id='+item.resourceId">{{item.resourceName}}</a>
                  <span>{{item.name}}</span>
                </p>
              </li>
              <!--周五-->
              <li class="item"
                  v-bind:class="{ 'active': this.weekday==5 }">
                <div class="title">
                  <h3>周五</h3>
                  <span class="icon icon-friday"></span>
                </div>
                <a href="#" class="img" style="height: auto">
                  <img v-if="d5[0]" :src="'http://localhost:8081/imgs/resource/'+d5[0].resourceId+'/'+d5[0].resourceCover" alt="#" style="height: auto">
                </a>
                <p class="link" v-for="(item,index) in d5" :key="index">
                  <a :href="'http://localhost:9999/comicDetail?id='+item.resourceId">{{item.resourceName}}</a>
                  <span>{{item.name}}</span>
                </p>
              </li>
              <!--周六-->
              <li class="item"
                  v-bind:class="{ 'active': this.weekday==6 }">
                <div class="title">
                  <h3>周六</h3>
                  <span class="icon icon-saturday"></span>
                </div>
                <a href="#" class="img" style="height: auto">
                  <img v-if="d6[0]" :src="'http://localhost:8081/imgs/resource/'+d6[0].resourceId+'/'+d6[0].resourceCover" alt="#" style="height: auto">
                </a>
                <p class="link" v-for="(item,index) in d6" :key="index">
                  <a :href="'http://localhost:9999/comicDetail?id='+item.resourceId">{{item.resourceName}}</a>
                  <span>{{item.name}}</span>
                </p>
              </li>
              <!--周日-->
              <li class="item"
                  v-bind:class="{ 'active': this.weekday==0 }">
                <div class="title">
                  <h3>周日</h3>
                  <span class="icon icon-sunday"></span>
                </div>
                <a href="#" class="img" style="height: auto">
                  <img v-if="d0[0]" :src="'http://localhost:8081/imgs/resource/'+d0[0].resourceId+'/'+d0[0].resourceCover" alt="#" style="height: auto">
                </a>
                <p class="link" v-for="(item,index) in d0" :key="index">
                  <a :href="'http://localhost:9999/comicDetail?id='+item.resourceId">{{item.resourceName}}</a>
                  <span>{{item.name}}</span>
                </p>
              </li>
            </ul>
          </div>
          <div class="area-side fr" JS-tab="true">
            <header class="area-header">
              <h2 class="title">
                <b>站长安利</b>
              </h2>
            </header>
            <div class="pic-box">
              <a href="#" class="img" style="width: 260px">
                <img src="http://localhost:8081/imgs/resource/8/a.jpg" alt="#" style="width: 260px">
              </a>
              <p class="link">
                <a href="#">斯特拉的魔法</a>
                <span>第7话</span>
              </p>
            </div>
          </div>
        </div>
      </section>


      <!-- 广告 -->
      <div class="area clearfix area-ad">
        <a href="#" class="fl"><img src="/images/cont/ad2.png" alt="#"></a>
        <a href="#" class="fr"><img src="/images/cont/ad3.png" alt="#"></a>
      </div>

    </div>
  </div>

  <!---------- 底部内容 ---------->
  <div id="footer">
    <div class="container auto-width">
      <div class="footer-top clearfix">
        <div class="footer-nav fl">
          <div class="item">
            <h4>合作</h4>
            <p>
              <a href="#">关于我们</a>
              <a href="#">联系我们</a>
              <br>
              <a href="#">AC招聘</a>
            </p>
          </div>
          <span class="line"></span>
          <div class="item">
            <h4>官方</h4>
            <p>
              <a href="#">新浪微博</a>
              <a href="#">官方网店</a>
              <br>
              <a href="#">微信公众号<img src="/images/footer-arcode.jpg" class="footer-orcode" alt="#"></a>
            </p>
          </div>
          <span class="line"></span>
          <div class="item">
            <h4>下载</h4>
            <p>
              <a href="#" class="mg-0">移动客户端</a>
              <span class="new">new</span>
              <br>
              <a href="#">AC娘表情包</a>
            </p>
          </div>
          <span class="line"></span>
          <div class="item">
            <h4>友情链接</h4>
            <p>
              <a href="#">斗鱼直播</a>
              <a href="#">匿名版</a>
              <br>
              <a href="#">AC大逃杀</a>
            </p>
          </div>
          <span class="line"></span>
          <div class="item">
            <h4>反馈</h4>
            <p>
              <a href="#">意见反馈</a>
              <a href="#">举报</a>
              <a href="#">帮助中心</a>
              <br>
              <a href="#">免责声明</a>
              <a href="#">用户协议</a>
            </p>
          </div>
        </div>
        <div class="footer-img fr">
          <img src="/images/footer-logo.gif" alt="#">
        </div>
      </div>
      <div class="footer-middle clearfix">
        <div class="item">
          <a href="#"><i class="icon icon-1"></i>中国互联网举报中心</a>
          <a href="#"><i class="icon icon-2"></i>网络文化经营单位</a>
        </div>
        <div class="item">
          <span>京8888888888号</span>
        </div>
        <div class="item">
          <span>节目制作经营许可证66666666666号</span>

        </div>
      </div>
      <div class="footer-bottom">
        <img src="/images/logo-gray.png" alt="#">
        <p>本站不提供任何视听上传服务，所有内容均来自视频分享站点所提供的公开引用资源。********</p>
      </div>
    </div>
  </div>

  <a href="javascript:;" id="back_top" class="iconfont icon-up"></a>



</body>
<script>
  let loginAp = new Vue({
    el : "#loginDiv",
    data :{
      loginUser:{
        id:'',
        username : '',
        avatar:'',
      }
    },
    methods:{
      userExit(){
        let url= "http://localhost:9999/user/logout"
        axios.get(url).then((resp)=>{
          if (resp.data!=200){
            alert("网络繁忙请稍后重试")
          }else {
            location.reload()
          }
        })

      },
      initUser(){
        let url = "http://localhost:9999/user/getLoginUser";
        axios.get(url).then(res=>{
          if (res.data.code == 200){
            this.loginUser=res.data.data;
          }
        })
      }
    },
    created(){
      this.initUser();
    }

  });
  let taglist=new Vue({
    el:"#taglist",
    data:{
      taglist:[],
    },
    methods:{
      querytag(){
        let url="http://localhost:9999/tag/list"
        axios.get(url).then((resp)=>{
          this.taglist=resp.data
        })
      }
    },
    created(){
      this.querytag()
    }
  })
  let main=new Vue({
    el: "#main",
    data: {
      weekday:'',
      randomList:[],
      fineList:[],
      buyList:[],
      d0:[],
      d1:[],
      d2:[],
      d3:[],
      d4:[],
      d5:[],
      d6:[]

    },
    methods: {
      getWeekday(){
        this.weekday=new Date().getDay()
      },
      getrandomList(){
        let url='http://localhost:9999/resource/listCons'
        axios.get(url).then((resp)=>{
          this.randomList=resp.data
        })
      },
      getFineList(){
        let url='http://localhost:9999/resource/listFine?num=5'
        axios.get(url).then((resp)=>{
          this.fineList=resp.data
        })
      },
      getBuyList(){
        let url='http://localhost:9999/resource/listBuy?num=8'
        axios.get(url).then((resp)=>{
          this.buyList=resp.data
        })
      },
      getWeekSection(){
        let url='http://localhost:9999/section/weekdaySectionList?weekday='+this.weekday
        axios.get(url).then((resp)=>{
          this.d0=resp.data[0]
          this.d1=resp.data[1]
          this.d2=resp.data[2]
          this.d3=resp.data[3]
          this.d4=resp.data[4]
          this.d5=resp.data[5]
          this.d6=resp.data[6]
        })
      }

    },
    created() {
      this.getWeekday()
      this.getrandomList()
      this.getFineList()
      this.getBuyList()
      this.getWeekSection()
    }
  })
</script>

</html>